@namespace Microsoft.FluentUI.AspNetCore.Components
@inherits ListComponentBase<TOption>
@typeparam TOption
@if (!String.IsNullOrEmpty(Height))
{
    <style>
        @($"#{Id}:focus-within:not([disabled]) {{outline: none; }}")
    </style>
}
<CascadingValue Value="@_internalListContext" Name="ListContext" TValue="InternalListContext<TOption>" IsFixed="true">
    <div style="@BorderStyle.Build()">
        <FluentInputLabel ForId="@Id" Label="@Label" AriaLabel="@AriaLabel" Required="@Required" ChildContent="@LabelTemplate" />
        <fluent-listbox @ref="Element"
                        id="@Id"
                        class="@ClassValue"
                        style="@($"{StyleValue} border: none; width: 100%;")"
                        disabled="@Disabled"
                        size="@Size"
                        multiple="@Multiple"
                        required="@Required"
                        selectedOptions="@(SelectedOptions != null && SelectedOptions.Any() ? string.Join(',', SelectedOptions.Select(i => GetOptionValue(i))) : null)"
                        @onkeydown="@OnKeydownHandlerAsync"
                        @attributes="AdditionalAttributes">
                @_renderOptions
        </fluent-listbox>
    </div>
</CascadingValue>
